<template>
  <ElTree
    style="max-width: 600px"
    :data="fileTree"
    :props="{
      label: 'name',
    }"
    node-key="id"
    :default-expanded-keys="[1]"
    @node-expand="handleExpand"
    @node-collapse="handleCollapse"
  >
    <template #default="{ node, data }">
      <ElIcon v-if="!data.isFile">
        <FolderOpened v-if="data.expand" />
        <Folder v-else />
      </ElIcon>
      <span class="file_name">{{ data.name }}</span>
    </template>
  </ElTree>
</template>

<script setup>
import { ref } from "vue";
import { projectFileTree } from "@/utils/common";
const fileTree = ref(projectFileTree);

function handleExpand(node) {
  node.expand = true;
}
function handleCollapse(node) {
  node.expand = false;
}
</script>

<style scoped>
.el-tree {
  padding: 10px;
}
.el-tree :deep(.el-tree-node__content .el-icon.el-tree-node__expand-icon) {
  display: none;
}
.file_name {
  margin-left: 5px;
}
</style>
